<script setup lang="ts">
import {ref} from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

// 定义是否折叠侧边栏的状态
const isCollapse = ref(false)

// 处理菜单项展开事件
const handleOpen = (key: string, keyPath: string[]) => {
  console.log('open', key, keyPath)
}

// 处理菜单项关闭事件
const handleClose = (key: string, keyPath: string[]) => {
  console.log('close', key, keyPath)
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- 左侧导航栏 -->
      <el-aside width="200px" style="background-color: #304156;">
        <el-menu
            default-active="1"
            router
            background-color="#304156"
            text-color="#fff"
            active-text-color="#ffd04b"
            unique-opened
            :collapse="isCollapse"
        >
          <el-sub-menu index="1">
            <template #title>
              <i class="el-icon-s-home"></i>
              <span>模型</span>
            </template>
            <el-menu-item index="1-1">立方体</el-menu-item>
            <el-menu-item index="1-2">球体</el-menu-item>
            <el-menu-item index="1-3">管道</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <i class="el-icon-document"></i>
              <span>面板</span>
            </template>
            <el-menu-item index="2-1">地铁站</el-menu-item>
            <el-menu-item index="2-2">城市</el-menu-item>
            <el-menu-item index="2-3">工厂</el-menu-item>
            <el-menu-item index="2-4">智慧仓储</el-menu-item>
            <el-menu-item index="2-5">智慧机房</el-menu-item>
            <el-menu-item index="2-6">智慧楼宇</el-menu-item>
            <el-menu-item index="2-7">智慧高炉</el-menu-item>
            <el-menu-item index="2-8">暖通</el-menu-item>
            <el-menu-item index="2-9">石油化工厂</el-menu-item>
            <el-menu-item index="2-10">风电能源</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <i class="el-icon-setting"></i>
              <span>DOM</span>
            </template>
            <el-menu-item index="3-1">系统资源</el-menu-item>
            <el-menu-item index="3-2">我的资源</el-menu-item>
            <el-menu-item index="3-3">数据</el-menu-item>
            <el-menu-item index="3-4">结构</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 主要内容区域 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>



<style scoped>
.sidebar {
  width: 200px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #304156;
  overflow-y: auto;
}

.el-menu {
  border-right: none;
}

.el-sub-menu .el-menu-item {
  transition: all 0.3s ease;
}

.el-sub-menu:hover > .el-menu-item {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>

<style scoped>
/* 确保当侧边栏未折叠时，它的宽度是200px */
.el-aside .el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

/* 当侧边栏折叠时，设置一个较小的宽度 */
.el-aside {
  transition: width 0.3s;
}

/* 其他样式可以根据需要添加 */
</style>